<template>
	<view style="padding: 25rpx 25rpx 190rpx;">
		<view class="addBtn">
			<view @click="addCoach">+新建运动员</view>|
			<view @click="popSportsList">+选择运动员</view>
		</view>

		<view class="block">
			<view class="t">运动员列表(当前队伍：{{teamName}})</view>
			<view class="mb30" v-for="(s, index) in signInfoList" :key="s.id">
				<uni-list :border="false">
					<uni-list-item :thumb="s.personInfo.picUrl">
						<template v-slot:body>
							<view class="flexSoltbody">
								<view>
									<view>{{s.personInfo.realName}}
										<text v-if="s.personInfo.sex==0">(女)</text>
										<text v-else>(男)</text>
									</view>
								</view>
								<view class="red" v-if="extraform&&extraform.length>0">
									<uni-icons v-if="!s.extraPersonInfo" type="info-filled" size="20"
										color="#ec3535"></uni-icons>
									<text v-if="!s.extraPersonInfo" @click="goPersonInfo(s.personInfo.id,0)">
										完善补充信息
									</text>
									<text v-else @click="goPersonInfo(s.personInfo.id,s.extraPersonInfo.id)"
										style="font-size: 28rpx;color: #d43e3e;">修改</text>
								</view>
							</view>

						</template>
					</uni-list-item>
							<uni-list-item title="参赛项目" v-for="(p,index) in s.signInfo" :key="p.id">
								<template v-slot:body>
									<view class="flexSoltbody">
										<view class="p">
											{{p.cptProjectName}}&ensp;{{p.cptGroupName}}{{p.cptLevelName}}{{p.cptSonLevelName}} 
											<text style="color: #999;">{{p.zu}}</text>
										</view>
										<view class="list-item-btn">
											<uni-icons class="editBtn" color="#d43e3e"  @click="editThis(s.personInfo.id,index)" type="compose" size="18"></uni-icons>
											<uni-icons class="delBtn" color="#d43e3e" @click="removeThis(p,index)" type="trash" size="18"></uni-icons>
										</view>
									</view>
								</template>
							</uni-list-item>
				</uni-list>
			</view>
			<view class="nodata" v-if="signInfoList.length==0">
				<image mode="aspectFit" src="/static/nodata.png"></image>
				<text>点击选择运动员参加赛事</text>
			</view>
		</view>

		<view class="fixedBottom">
			<!-- <button class="btn btnKx" @click="goPrev" type="default">上一步</button> -->
			<button class="btn btn1" @click="goNext" type="default">完成</button>
		</view>

		<!-- 运动员列表 -->
		<uni-popup ref="popup" type="bottom" background-color="#fff">
			<view class="vh70">
				<uni-list class="pb60">
					<uni-list-item v-for="a in athletesList" clickable @click="chooseThisMan(a)" :key="a.id"
						:title="a.realName" :note="a.sex" :thumb="a.picUrl" thumb-size="lg">
						<template v-slot:body>
							<view class="flexSoltbody">
								<view class="slot-box athleteslist-slot">
									<view class="slot-text">{{a.realName}}</view>
									<text class="slot-text" v-if="a.sex==0">女</text>
									<text class="slot-text" v-else>男</text>
								</view>

								<view>
									<text style="font-size: 24rpx;color: #d40000;"
										v-if="noPhotoCanSign=='0'&&(!a.picUrl)">上传照片</text>
									<text style="font-size: 28rpx;color: #d43e3e;" v-else>选择</text>
								</view>
							</view>

						</template>
					</uni-list-item>
				</uni-list>
				<view class="nodata" v-if="athletesList.length==0">
					<image mode="aspectFit" src="/static/nodata.png"></image>
					<text>暂无可选运动员</text>
				</view>
			</view>

		</uni-popup>
	
	</view>
</template>

<script setup>
	import {
		reactive,
		toRefs,
		getCurrentInstance
	} from 'vue';
	const {
		proxy
	} = getCurrentInstance()
	import * as match from '@/common/match.js';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import _ from 'lodash';
	const data = reactive({
		hasChooseObj: {},
		groupId: '',
		athletesList: [],
		chooseList: [],
		signInfoList: [],
		chooseObj: {},
		popup: null,
		signType: '2',
		extraform: [],
		personal: {},
		minCount: '',
		maxCount: '',
		signProjectValue: '',
		coachOrLeaderFlag: null,
		noPhotoCanSign: null,
		teamName: ''
	});
	const {
		hasChooseObj,
		groupId,
		athletesList,
		chooseList,
		chooseObj,
		popup,
		signType,
		extraform,
		teammateList,
		popTeammates,
		personal,
		minCount,
		maxCount,
		signProjectValue,
		coachOrLeaderFlag,
		noPhotoCanSign,
		teamName,
		signInfoList
	} = toRefs(data);
	let matchId = ''
	let teamId = ''
	let extraId = ''
	let chargeFlag = ''

	onLoad((option) => {
		console.log(option)
		groupId.value = option.groupId
		if (option.hasChooseObj) {
			hasChooseObj.value = JSON.parse(decodeURIComponent(option.hasChooseObj))
		}

		matchId = option.matchId
		teamId = option.teamId
		teamName.value = option.teamName

		// 获取补充信息字段
		getExtraform(matchId)
	})
	onShow(() => {
		getMySignInfo({
			cptId: matchId,
			groupId: groupId.value,
			teamId:teamId
		})
		getAthletesList(groupId.value, matchId)
	})
	let signInfoType = null

	function getMySignInfo(obj) {
		signInfoList.value = []
		// 是否已有
		match.getMySignInfo(obj).then(res => {
			console.log(res.data)
			signInfoType = res.data.type
			chooseList.value = res.data.signInfo
			// 4有被的报信息 5 有被清除的报名信息 6 有被的报名信息
			if (res.data.type == '4' || res.data.type == '5' || res.data.type == '6') {
				console.log('ff')
			}
		})
		getSignInfoList(obj)
	}
	function getSignInfoList(obj){
		match.getMySignInfoList(obj).then(res => {
			signInfoList.value = res.data
		})
	}
	function editThis(personId,index) {
		uni.navigateTo({
			url: `/pages_match/match/projectList?personId=${personId}&matchId=${matchId}&groupId=${groupId.value}&teamId=${teamId}`
		});		
	}
	function removeThis(p, index) {
		match.deleteSign(p.id).then(res => {
			// 重新获取已报名信息
			getSignInfoList({
				cptId: matchId,
				groupId: groupId.value,
				teamId:teamId
			})
		})
	}

	function goPersonInfo(id, extraId) {
		if (signInfoType == '1') {
			uni.showModal({
				title: '提示',
				content: '已报项，前往我的报项',
				showCancel: false,
				success: function(res) {
					if (res.confirm) {
						let path =
							`/pages/usercenter/match`;
						uni.reLaunch({
							url: path
						});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
			return
		}
		extraId = extraId
		// 前往编辑个人信息-补充信息
		let path =
			`/pages_match/match/sign_single?matchId=${matchId}&personId=${id}&extraId=${extraId}&participantsInfo=${participantsInfo}`;
		uni.navigateTo({
			url: path
		});
	}
	let participantsInfo

	function getExtraform(id) {
		match.getMatchById({
			id: id
		}).then(res => {
			chargeFlag = res.data.chargeFlag
			noPhotoCanSign.value = res.data.noPhotoCanSign
			coachOrLeaderFlag.value = res.data.coachOrLeaderFlag
			participantsInfo = res.data.participantsInfo
			extraform.value = JSON.parse(participantsInfo)
		})
	}

	function getCanSignProjectList(id) {
		match.getCanSignProjectList(id).then(res => {
			signProjectList.value = res.data
		})
	}

	function getAthletesList(a, b) {
		match.getMyGroupForCpt(a, b).then(res => {
			athletesList.value = res.data.athletes
		})
	}
	function popSportsList() {
		if (signInfoType == '2') {
			match.recoverMySign({
				cptId: matchId,
				groupId: groupId.value
			}).then(res => {
				if (res.msg.indexOf("Exception:") > -1) {
					let msg = res.msg.slice(10)
					uni.showModal({
						title: '提示',
						content: msg,
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
							}
						}
					});
					return
				}
				getMySignInfo({
					cptId: matchId,
					groupId: groupId.value
				})
			})
		}
		popup.value.open()

	}
	function goPrev() {
		uni.navigateBack();
	}
	function chooseThisMan(t) {
		if (noPhotoCanSign.value == '0' && (!t.picUrl)) {
			// 完善信息
			uni.navigateTo({
				url: `/pages_match/match/add_coach?id=${t.id}&groupId=${t.groupId}`
			});
		} else {
			personal.value = t
			uni.navigateTo({
				url: `/pages_match/match/projectList?personId=${t.id}&matchId=${matchId}&groupId=${groupId.value}&teamId=${teamId}`
			});
		}
	}

	function createSportman() {
		let path = `/pages_match/match/add_coach?groupId=${groupId.value}&id=0&signType=${signType.value}`;
		uni.navigateTo({
			url: path
		});
	}

	function goNext() {
		if (signInfoType == '1') {
			uni.showModal({
				title: '提示',
				content: '已报项，前往我的报项',
				showCancel: false,
				success: function(res) {
					if (res.confirm) {
						let path =
							`/pages/usercenter/match`;
						uni.reLaunch({
							url: path
						});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
			return
		}

		if (signInfoList.value.length == 0) {
			uni.showToast({
				title: '请至少选择一个运动员',
				icon: 'none',
				duration: 2000
			});
			return
		}
		if (extraform.value && extraform.value.length > 0) {
			let needBuchong = false
			for(let e of extraform.value){
				if(e.status == '0'){
					needBuchong = true
				}
			}
			for (let s of signInfoList.value) {				
				if (s.extraPersonInfo == null && needBuchong) {
					uni.showToast({
						title: '请完善运动员补充信息',
						icon: 'none',
						duration: 2000
					});
					return
				}
			}
		}

		if (signInfoType == '2') {
			match.recoverMySign({
				cptId: matchId,
				groupId: groupId.value
			}).then(res => {
				if (res.msg.indexOf("Exception:") > -1) {
					let msg = res.msg.slice(10)
					uni.showModal({
						title: '提示',
						content: msg,
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
							}
						}
					});
					return
				}
				uni.navigateBack()
			})
		} else {
			uni.navigateBack()
		}

	}

	function afterRecover() {
		// 判断是否收费
		if (chargeFlag == '0') {
			// 免费
			// 提交报名
			var obj = {
				cptId: matchId,
				groupId: groupId.value
			}
			match.commitSign(obj).then(res => {
				console.log(res.data)
				let path =
					`/pages_match/match/matchPayDone?cptId=${matchId}&groupId=${groupId.value}&chargeFlag=${chargeFlag}&orderId=${res.data}`;
				uni.navigateTo({
					url: path
				});
			})

		} else {
			let path = `/pages_match/match/matchBill?cptId=${matchId}&groupId=${groupId.value}`;
			uni.navigateTo({
				url: path
			});
		}
	}

	function addCoach() {
		if (signInfoType == '2') {
			match.recoverMySign({
				cptId: matchId,
				groupId: groupId.value
			}).then(res => {
				if (res.msg.indexOf("Exception:") > -1) {
					let msg = res.msg.slice(10)
					uni.showModal({
						title: '提示',
						content: msg,
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
							}
						}
					});
					return
				}
			})
		}

		let path = `/pages_match/match/add_coach?groupId=${groupId.value}&id=0&matchId=${matchId}`;
		uni.navigateTo({
			url: path
		});


	}

</script>

<style scoped lang="scss">
	.red {
		color: #ec3535;
	}

	.uni-popup .t {
		text-align: center;
		font-size: 30rpx;
		padding: 30rpx 0;
	}

	.uni-popup .tj {
		font-size: 30rpx;
		padding: 30rpx 30rpx 0;
	}

	.tj button {
		display: inline;
		font-size: 24rpx;
		border: none !important;
	}

	.addBtn {
		width: 700rpx;
		display: flex;
		height: 90rpx;
		line-height: 90rpx;
		background: #ffffff;
		color: #d43e3e;
		border: 1rpx solid #d43e3e;
		font-size: 30rpx;
		border-radius: 15rpx;

		view {
			color: #d43e3e;
			line-height: 90rpx;
			width: 50%;
			text-align: center;
		}
	}

	.block .list {
		background: #ffffff;
		padding: 30rpx 0;
		display: flex;
		border-radius: 15px;
		flex-wrap: wrap;
	}

	.block .list view {
		position: relative;
		text-align: center;
		margin: 0 20rpx 20rpx 50rpx;
	}

	.block .list .photo {
		width: 100rpx;
		border-radius: 50%;
		display: block;
		height: 100rpx;
		object-fit: cover;
		background: #eee;
		margin: 0 0 17rpx;
	}

	.block .list .name {
		color: #000000;
		text-align: center;
		font-size: 30rpx;
	}

	.block .list>view uni-icons {
		position: absolute;
		right: -24rpx;
		top: 0;
		background: #fff;
		border-radius: 50%;
	}

	.teamTab {
		display: flex;
		margin: 20rpx 0;
		border-bottom: 1rpx solid #d43e3e;

		view {
			font-size: 32rpx;
			padding: 16rpx 20rpx;
			border-radius: 10rpx 10rpx 0 0;
		}

		.active {
			background: #d43e3e;
			position: relative;
			color: #fff;
		}
	}

	.mb40 {
		margin-bottom: 40rpx;
		display: block;
	}

	.mb30 {
		margin-bottom: 30rpx;

		:deep(.uni-collapse-item) {
			padding: 0;
			margin: 0;
		}
	}

	.pb60 {
		padding-bottom: 60rpx;
	}

	.rankBody {
		.name {
			margin: 0 0 14rpx;
		}

		text {
			color: #999;
			font-size: 26rpx;
			margin: 0 20rpx 0 0;
		}
	}

	.content {
		padding: 0 30rpx;
	}

	:deep(.uni-collapse-item) {
		margin: 0 !important;
		border-bottom: 1px solid #e1e1e1;
		border-radius: 0;
	}

	:deep(.uni-list-item__extra) {
		max-width: 60%;
	}

	.levelTitle {
		display: flex;
		justify-content: space-between;

		text {
			float: right;
			font-size: 28rpx;
			color: #999;
		}

		:deep(.uni-icons) {
			float: right;
		}
	}

	.levelList {
		padding: 20rpx 40rpx 40rpx;
		background: #fff;
		border-radius: 20rpx;
		width: 80vw;
		max-height: 70vh;
		overflow: auto;
		box-sizing: border-box;
	}

	.vh65 {
		height: 65vh;
		overflow: auto;

		:deep(.uni-list-item__container) {
			padding: 10px 0;
		}

		:deep(.uni-list-item__content-title) {
			font-size: 17px;
			color: #888;
		}
	}

	:deep(.uni-section .uni-section-header) {
		padding: 12px 0 0 !important;
	}

	.teammateBox {
		background: #fff;
		height: 70vh;
		overflow: auto;
		position: relative;

		.btn1 {
			position: absolute;
			bottom: 30px;
			margin: auto;
			left: 0;
			right: 0;
		}
	}

	.headimg {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin: 0 40rpx;
	}

	.flexLabel {
		align-items: center;
		padding: 22rpx 30rpx;
		display: flex;
		justify-content: flex-start;
	}

	.mateinfo {
		font-size: 30rpx;

		text {
			color: #4C5359;
		}
	}

	.slot-button {
		flex: 1;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		text-align: center;
	}
	.slot-button-edit{background-color: #d43e3e;padding: 20rpx 40rpx;color: #ffffff;}
	.slot-button-del{background-color: #ff5a5f;padding: 20rpx 40rpx;color: #ffffff;}
	.slot-button-text {padding: 20rpx 40rpx;
		color: #ffffff;background-color: #ff5a5f;
		font-size: 28rpx;
		display: block;
	}

	.vh70 {
		height: 70vh;
		overflow: auto;
	}

	.teamListArea {
		height: 65%;
		overflow: auto;
	}

	.athleteslist-slot {
		color: #666;
		font-size: 26rpx;
	}
	.flexSoltbody {
		display: flex;
		justify-content: space-between;
		width: 100%;
		align-items: center;
		.label {color: #999;font-size: 28rpx;}
		.p {font-size: 30rpx;color: #000; max-width: 60vw;word-break: break-all;}
	}
	.list-item-btn{
		text{font-size: 28rpx;}
		.editBtn{    padding: 10rpx;}
		.delBtn{    padding: 10rpx;}
	}
</style>